<template>
	<view>
		<u-navbar back-icon-color="#ffffff" title="优惠券" title-color="#ffffff" :background="background"></u-navbar>
		<view class="tabs">
			<u-sticky offset-top="0">
				<view><u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#18B566"></u-tabs></view>
			</u-sticky>
		</view>
		<view class="content">
			<block v-if="couponList.length > 0">
				<view class="jingdong" v-for="(item, index) in couponList" :key="index">
					<view class="left">
						<view class="sum" v-if="item.discountType == 0">
							￥
							<text class="num">{{ item.discount }}</text>
						</view>
						<view class="sum" v-else>
							<text class="num">{{ item.discount }}</text>
							折
						</view>
						<view class="type" v-if="item.conditionType == 0">满{{ item.conditions }}元可用</view>
						<view class="type" v-else>满{{ item.conditions }}件商品可用</view>
					</view>
					<view class="right">
						<view class="top">
							<view class="title">
								<block v-if="item.couponType == 1">
									<text class="tag">全品类券</text>
									<text class="u-line-2 u-m-t-10">平台全部商品均可使用</text>
								</block>
								<block v-else-if="item.couponType == 2">
									<text class="tag">限品类券</text>
									<text class="u-line-2 u-m-t-10">仅限【{{item.couponTypeDetails?item.couponTypeDetails:'-'}}】分类下商品可用</text>
								</block>
								<block v-else>
									<text class="tag">限品牌券</text>
									<text class="u-line-2 u-m-t-10">仅限【{{item.couponTypeDetails?item.couponTypeDetails:'-'}}】品牌可用</text>
								</block>
							</view>
							<view class="bottom">
								<view class="date u-line-1">截止时间：{{ item.expireDate | date }}</view>
								<view class="immediate-use" v-if="current == 0" @click="giveCoupon(item.id)">立即领取</view>
							</view>
						</view>
						<view class="tips">
							<view class="explain">
								<!-- 							<u-icon name="zhuanfa" class="transpond" :size="24"></u-icon>
		 -->
								<text>备注：{{ item.remarks != null ?item.remarks:'-' }}</text>
							</view>
						</view>
					</view>
				</view>
			</block>
			<view v-else><u-empty class="empty" text="没有优惠券" mode="coupon"></u-empty></view>
		</view>
		<u-toast ref="uToast" />
		<view class="">
			<u-popup v-model="loadingShow" mode="center" width="280rpx" height="280rpx">
				<view class="loading-popup">
					<view><u-icon name="checkmark-circle-fill" color="#18b566" size="120"></u-icon></view>
					<view>领取优惠券</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			//
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			//tabs
			list: [
				{
					valse: 1,
					name: '待领取'
				},
				{
					valse: 2,
					name: '未使用'
				},
				{
					valse: 3,
					name: '已使用'
				}
			],
			current: 0,
			//
			couponList: [],
			//
			loadingShow: false,
		};
	},
	onLoad(e) {
		try {
			const token = uni.getStorageSync('token');
			console.log(token);
			if (token) {
				const userInfo = uni.getStorageSync('userInfo');
				if(!userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				this.getCouponList();
				this.current = 0;
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	onShow() {
		this.getCouponList();
	},
	onPullDownRefresh() {
		if (this.current == 0) {
			//待领取
			this.getCouponList();
		} else if (this.current == 1) {
			this.getUserCouponList(0);
			//未使用
		} else {
			this.getUserCouponList(1);
			//已使用
		}
		setTimeout(function() {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
		//
		getCouponList() {
			let _t = this;
			_t.$u.api.getCouponList().then(res => {
				console.log('getCouponList=======');
				console.log(res);
				_t.couponList = res.data;
			});
		},
		//
		getUserCouponList(isUse) {
			let _t = this;
			_t.$u.api.getUserCouponList({ isUse: isUse }).then(res => {
				console.log('getUserCouponList=======');
				console.log(res);
				_t.couponList = res.data.totalElements;
			});
		},
		// tabs 栏切换
		change(index) {
			let _t = this;
			console.log(index);
			_t.current = index;
			if (_t.current == 0) {
				//待领取
				_t.getCouponList();
			} else if (_t.current == 1) {
				_t.getUserCouponList(0);
				//未使用
			} else {
				_t.getUserCouponList(1);
				//已使用
			}
		},
		giveCoupon(id) {
			console.log(id);
			let _t = this;
			_t.$u.api.giveUserCouponList({ id: id }).then(res => {
				console.log('giveUserCouponList=======');
				console.log(res);
				if (res.statusCode == 200) {
					_t.$refs.uToast.show({
						title: '领取优惠券成功',
						type: 'success'
					});
				}
				_t.getCouponList();
				//_t.couponList = res.data.content;
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f4f6;
	height: 100vh;
}
.loading-popup{
	padding: 40rpx;
	text-align: center;
}
.tabs {
	position: fixed;
	top: 20;
	width: 100%;
}
.empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 50vh;
}
.content {
	padding: 56rpx 24rpx;
}
.jingdong {
	margin-top: 40rpx;
	width: 700rpx;
	height: auto;
	background-color: #ffffff;
	display: flex;
	.left {
		width: 30%;
		padding: 0 30rpx;
		background-color: #18b566; //rgb(94, 152, 225);
		text-align: center;
		font-size: 28rpx;
		color: #ffffff;
		.sum {
			margin-top: 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			.num {
				font-size: 80rpx;
			}
		}
		.type {
			margin-bottom: 50rpx;
			font-size: 24rpx;
		}
	}
	.right {
		padding: 20rpx 20rpx 0 20rpx;
		font-size: 28rpx;
		width: 70%;
		.top {
			border-bottom: 2rpx dashed $u-border-color;
			.title {
				margin-right: 60rpx;
				line-height: 40rpx;
				.tag {
					padding: 4rpx 20rpx;
					background-color: #ff7900;
					border-radius: 20rpx;
					color: #ffffff;
					font-weight: bold;
					font-size: 24rpx;
					margin-right: 10rpx;
				}
			}
			.bottom {
				display: flex;
				margin-top: 20rpx;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 10rpx;
				.date {
					font-size: 20rpx;
					flex: 1;
				}
				.immediate-use {
					height: auto;
					padding: 0 20rpx;
					font-size: 24rpx;
					border-radius: 40rpx;
					line-height: 40rpx;
					color: #17933f;
					border: 2rpx solid #17933f;
				}
			}
		}
		.tips {
			width: 100%;
			line-height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			.transpond {
				margin-right: 10rpx;
			}
			.explain {
				display: flex;
				align-items: center;
			}
			.particulars {
				width: 30rpx;
				height: 30rpx;
				box-sizing: border-box;
				padding-top: 8rpx;
				border-radius: 50%;
				background-color: $u-type-info-disabled;
				text-align: center;
			}
		}
	}
}
</style>
